<template>
    <div>
        <a-form id="update-form">
            <div class="header">
                <h3>一、基本信息</h3>
            </div>
            <div class="form-main-content">
                <a-row :gutter="0">
                    <a-col :key="0" :span="8" class="form-item">
                        <a-form-item label="推送编号">
                            {{data.sn}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="1" :span="8" class="form-item">
                        <a-form-item label="推送类型">
                            {{data.type}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="2" :span="8" class="form-item">
                        <a-form-item label="推送时间">
                            {{data.created_at}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="3" :span="8" class="form-item">
                        <a-form-item label="发出人">
                            {{data.sender}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="4" :span="8" class="form-item">
                        <a-form-item label="接收人">
                            {{data.receiver}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="5" :span="8" class="form-item">
                        <a-form-item label="相关订单/任务">
                            <router-link :to="'/orders/update/'+data.order_id">{{data.order_sn}}</router-link>
                        </a-form-item>
                    </a-col>
                    <a-col :key="6" :span="8" class="form-item">
                        <a-form-item label="操作结果">
                            {{data.status}}
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="0">
                    <a-col :key="0" :span="24">
                        <a-form-item label="相关凭证">
                            <div v-if="fileList" class="img-displayed"><img style="width: 86px;height: 86px;" v-for="v in fileList" :src="v.url" @preview="handlePreview(v.url)"/></div>
                            <span v-else>无</span>
                            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                                <img style="width: 100%" :src="previewImage"/>
                            </a-modal>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="0">
                    <a-col :key="0" :span="24" class="form-item">
                        <a-form-item label="备注">
                            {{data.remark}}
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>
        </a-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id: 0,
                disabled: true,
                labelCol: {lg: {span: 8}, sm: {span: 8}},
                wrapperCol: {lg: {span: 16}, sm: {span: 16}},
                previewVisible: false,
                previewImage: '',
                loading: false,
                fileList: [],
                data: []
            }
        },

        methods: {
            handleCancel() {
                this.previewVisible = false
            },
            handlePreview(file) {
                this.previewImage = file.url || file.thumbUrl;
                this.previewVisible = true
            },
            async getDetail(id) {
                return await this.http('get', 'push/view', {id: id});
            }
        },
        mounted() {
            this.id = this.$route.params.id;
            this.getDetail(this.id).then(res => {
                this.data = res;
                this.fileList = res.evidence
            })

        }

    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .header {
        @include fj();
        margin-bottom: 30px;
    }

    .img-displayed {
        img + img {
            margin-left: 20px;
        }
    }
</style>
